<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!--插入和替换元素操作：针对元素增删改操作  
		append()             功能：在匹配元素集合中所有元素内部的末尾插入内容
		prepend()           功能：在匹配元素集合中所有元素内部的内部插入内容
		
		after()            功能：在匹配元素集合中所有元素外部的后面插入内容
		before()          功能：在匹配元素集合中所有元素外部的前面插入内容
		
		remove()         功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		empty()         功能：清空匹配元素集合中所有的内容 【盒子模型不删】
		
		replaceWith()
		-->
		<style>
			button{
				margin: 5px;
				padding: 10px  15px;
			    cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border:1px solid #1e1e1e;
				margin-left:5px ;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<!-- html:7个按钮  div包含p包含：目标元素的初始段落     id="target"
		                  div包含p包含：插入新元素的初始段落   id="newElement"              
		     css:按钮：外边距5px,内边距：10px 15px 鼠标移动上：手指显示
			 body:外边距20px
			 #target:1像素边框、内边距：10px、上外边距：10px
			 引入jq
		 -->
		 <button id="appendBtn" >内部末尾插入元素</button>
		 <button id="prependBtn">内部开头插入元素</button>
		 <button id= "afterBtn">外部后面插入元素</button>
		 <button id="beforeBtn" >外部前面插入元素</button>
		 <button id="removeBtn">删除元素</button>
		 <button id="emptyBtn">清空元素</button>
		 <button id="replaceBtn">替换元素</button>
		 <div id="target">
			 <p>目标元素的初始段落</p>
		 </div>
		 <!-- 用于插入和替换-->
		 <div id="newElement" style="display: none;">
		 	<p>插入新元素的初始段落</p>
		 </div>
		 <script>
			 /* 1.点击  内部末尾插入元素 按钮 p文本后面追加新元素中半酣内容操作*/
			 $("#appendBtn").click(function(){
				 //效果：点击按钮 追加 “新元素--自带内容”
			    //1.1 追加内容是新元素---克隆---html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				cpe.css("display","block");
				//1.3 将复制出来的新元素，追加到当前元素上
				$("#target").append(cpe);
			 });
			 //2.点击  内部未尾插入元素   按钮 p文本后面追加新元素中包含内容操作
			$("#prependBtn").click(function () {
			            var cpe = $("#newElement").clone();
			            cpe.css("display", "block");
			            $("#target").prepend(cpe);
			        });
			// 3.点击  外部后面插入元素  按钮 p文本后面追加新元素中包含内容作
			$("#afterBtn").click(function () {
			            var cpe = $("#newElement").clone();
			           newElement.addClass($("#newElement").attr('class'));
			            $("#target").after(newElement);
			        });
					
			 //4.点击  外部前面插入元素 按扭 生成:圆形，保留背景色，文本不需要
			//                                              背景图:300*300
			 $("#beforeBtn").click(function () {
			             var cpe = $("#newElement").clone();
			             cpe.css("width":"300px", 
						   "width":"300px",  
						   "background-color":"red", 
						   "border-radius":"50%",
						   "background-image":"url(..img/1.png)",
						   "background-size":"100% 100%",
							   );
			             $("#target").before(cpe);
			         });
					 /* 5.点击 删除元素 按钮 页面上所有元素包括子元素全部删除【盒子模型】*/
					 $("#removeBtn").click(function(){
						$("#target").remove(); 
					 });
					 /* 6.点击 清空元素 按钮  页面上所有元素中内容全部删除【盒模型不删】*/
		             $("#emptyBtn").click(function(){
						$("#target").empty(); 
					 });
					 $("#replaceBtn").click(function(){
						//克隆  新元素 #newElement【父子级】
						var c=$("#newElement").clone().css("display","block");
						//替换  新元素 替换 目标元素
						 $("#target").replaceWith(c);
					 });
		 </script>
	</body>
</html>